<template>
	<view class="page">
		<!-- 搜索 -->

		<view class="index-nav">
			<u-navbar bgColor="#F0F0F0" :placeholder="true" :autoBack="true">
				<view class="flex-box" slot="left" style="width:150rpx;height:64rpx;">
					<u-icon size="20" name="map" style="margin-right: 10rpx;"></u-icon>
					<view style="font-size:26rpx;">{{province}}</view>
				</view>
				<view class="slot-wrap" slot="center">
					<view style="width:350rpx;">
						<u-search placeholder="请输入门店名称" bgColor="#fff" @search="searchStation" :showAction="false"
							v-model="keyword"></u-search>
					</view>
				</view>
			</u-navbar>
		</view>
		<!-- 筛选 -->

		<u-sticky customNavHeight="44">
			<view class="screen-info">
				<view class="screen-list">
					<view class="list box-1 list1" @click="onSynthesize(0)" :class="{'action':screenShow===0}">
						<text>综合排序</text>
						<!-- <text class="iconfont icon-sanjiao icon_z"></text> -->
					</view>
					<view class="list list2" @click="onSynthesize(1)" :class="{'action':screenShow===1}">
						<text>距离最近</text>
						<text></text>
					</view>
					<view class="list list3" :class="{'action':screenShow===2}" @click="onSynthesize(2)">
						<text>好评优先</text>

					</view>

				</view>

			</view>
		</u-sticky>


		<!-- 商品列表 -->
		<view class="goods-data">
			<mescroll-body ref="mescrollRef" @down="downCallback" @init="mescrollInit" @up="upCallback"
				:top="0">
				<view class="goods-list" v-if="goodsList.length">

					<view class="flex-box" :class="isList?'list-view':'list-li'" @click="toDetails(item)"
						v-for="(item,index) in goodsList" :key="index">
						<view class="thumb">
							<image :src="item.thumb" model="widthFix"></image>
						</view>
						<view class="item box-1">
							<view class="title flex-box">
								<view class="one-omit box-1">{{item.title}}</view>
								<text class="map-text">距您{{parseInt(item.distance*100)/100}}km</text>
							</view>

							<view class="xing flex-box">
								评分
								<u-rate :gutter="1" size="10" :value="item.score" readonly></u-rate>
							</view>
							<view class="price flex-box">
								<image src="../../static/img/map.png" class="icon-map"></image>
								<view class="box-1 two-omit address">
									{{item.address}}
								</view>
							</view>
							<view class="go-btn" @click.stop="toMap(item)">到这里去</view>
						</view>
					</view>
				</view>
				<view v-else>
					<u-empty mode="data" marginTop="100" text="暂无医院信息"></u-empty>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		wxconfig
	} from "@/utils/mixin-wxconfig.js";
	export default {
		mixins: [wxconfig, MescrollMixin], // 使用mixin
		data() {
			return {
				keyword: '',
				bgColor: '#d0abf4',
				// 列表视图切换
				isList: true,
				// 筛选弹窗
				isScreen: false,
				// 筛选切换
				screenShow: 0,
				// 抽屉
				isDrawer: false,
				// keyword: '',
				goodsList: [

				],
				latitude: '',
				longitude: '',
				pageSize: 10,
				province: '',
				page: 1,
				sort: 'none'
			}
		},
		onLoad(params) {
			this.keyword = decodeURIComponent(params.keyword || '');
		},
		onShow() {
			if (this.latitude || this.longitude) {
				return
			}
			this.getgLocation()
		},
		methods: {
			toDetails(item) {
				uni.navigateTo({
					url: "/pages/Station/details?id=" + item.id
				})
			},
			searchStation(value) {
				this.keyword = value
				this.downCallback()
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			toMap(item) {
				wx.ready(()=>{
					wx.openLocation({
						latitude: parseFloat(item.lat),
						longitude: parseFloat(item.lng),
						name: item.title, // 位置名
						address: item.address, // 地址详情说明
						scale: 17, // 地图缩放级别,整型值,范围从1~28。默认为最大
						infoUrl: '',
						success: (res) => {
							console.log('成功', res);
						},
						fail: (err) => {
							console.log('失败', err);
						}
					})
				})
			},
			// 定位
			getgLocation() {
				console.log('获取地图');
				wx.ready(() => {
          let location = ()=>{
            wx.getLocation({
              type: 'wgs84',
              success: (res) => {
                console.log('成功--', res);
                this.latitude = res.latitude
                this.longitude = res.longitude
                this.downCallback()
                uni.setStorageSync('mylatitude', res.latitude);
                uni.setStorageSync('mylongitude', res.longitude);
                this.$jsonp(`https://apis.map.qq.com/ws/geocoder/v1?location=${res.latitude},${res.longitude}&key=${this.$c.mapKey}&output=jsonp&get_poi=1`)
                    .then(msg => {
                      //这里是硬读的 没有执行函数 vue中间过滤了 把json提取出来了
                      console.log('1-----', msg);
                      if (msg.status == 0) {
                        this.province = msg.result.ad_info.city;
                      }
                    })
                    .catch(err => {
                      console.log('err-', err)
                    })


              },
              fail: (err) => {
                console.log('err111-', err);
                uni.showToast({
                  title: '定位失败',
                  duration: 2000,
                  icon: "none"
                })
                this.mescroll.endErr();
              }
            })
          }
          setTimeout(location,300);
				})

			},
			/*上拉加载的回调*/
			upCallback(page) {
				if (!this.latitude|| !this.longitude) {
					return
				}
				console.log('加载次数');
				//联网加载数据
				this.$u.api.souceStore({
					page: page.num,
					lat: this.latitude,
					lng: this.longitude,
					sort: this.sort,
					so: this.keyword
				}).then(res => {
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)

					if (page.num == 1) {
						this.goodsList = [];
					} //如果是第一页需手动制空列表
					this.goodsList = this.goodsList.concat(res.msg.list); //如果是第一页需手动制空列表
					return false
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})

			},
			/**
			 * 返回点击
			 */
			onBack() {
				uni.navigateBack();
			},
			/**
			 * 综合点击
			 * @param {Number} type
			 */
			onSynthesize(type) {
				this.screenShow = type;
				this.isScreen = !this.isScreen;
				if (type == 0) {
					this.sort = 'none'
				} else if (type == 1) {
					this.sort = 'distance'
				} else {
					this.sort = 'score'
				}

				this.downCallback()
			},

		}
	}
</script>

<style scoped lang="scss">
	@import 'Station.scss';
</style>